<template>
  <div class="navigation-container">
    <div class="navigation width display-flex">
      <!-- 左侧导航栏 -->
      <LeftNavList :navList="navList" @activeItem="handleActiveItem" :rightIndex="rightIndex" />
      <!-- 右侧内容 -->
      <RightContent
        :navListContent="navListContent"
        :leftNavIndex="leftNavIndex"
        @changeActiveIndex="changeActiveIndex"
      />
    </div>
  </div>
</template>

<script>
import LeftNavList from './component/left-navList.vue'
import RightContent from './component/right-content.vue'
import { getNavList, getNavContent } from '@/api/navigation'
export default {
  name: 'Navigation',
  components: {
    LeftNavList,
    RightContent
  },
  data() {
    return {
      navList: [],
      navListContent: [],
      leftNavIndex: 0,
      rightIndex: 0
    }
  },
  created() {
    this.getUserNavList()
    this.getRightContent()
  },
  methods: {
    // 获取导航列表
    async getUserNavList() {
      try {
        const res = await getNavList()
        console.log(res)
        if (res.code === 200) {
          this.navList = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 子组件传过来的左侧导航栏高亮项
    handleActiveItem(item) {
      this.leftNavIndex = item
    },
    changeActiveIndex(newval) {
      this.rightIndex = newval
    },
    // 获取右侧内容
    async getRightContent() {
      try {
        const res = await getNavContent()
        console.log(res)
        if (res.code === 200) {
          this.navListContent = res.data
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navigation-container {
  background-color: #f2f3f5;
  .navigation {
    padding-top: 80px;
  }
}
</style>
